<template>
    <el-drawer :visible.sync="show"
               custom-class="ke__drawer"
               :title="title"
               :size="size"
               @close="onClose"
    >
        <el-form ref="form"
                 :model="model"
                 :rules="rules"
                 v-loading="loading"
                 @submit.prevent.native="onSubmit"
                 class="ke__drawer-body">
            <div class="ke__drawer-content">
                <template v-if="!finished">
                    <slot/>
                </template>

                <div v-else class="ke__drawer-success">
                    <ul>
                        <li>
                            <span class="ke__drawer-success-icon">
                                <i class="el-icon-circle-check" v-show="!error"></i>
                                <i class="el-icon-warning-outline" v-show="error"></i>
                            </span>
                        </li>
                        <li>
                            <span class="ke__drawer-success-msg">
                                {{ msg }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="ke__drawer-footer">
                <el-button type="primary" native-type="submit">确认</el-button>

                <el-button type="default" @click="show = false">取消</el-button>
            </div>
        </el-form>
    </el-drawer>
</template>

<script>
export default {
    name: 'KDrawerForm',
    props: {
        form: String,
        model: Object,
        rules: Object,
        value: Boolean,
        title: String,
        size: String,
        load: Function,
        confirm: Function,
    },
    data() {
        return {
            loading: false,
            msg: '',
            error: false,
            finished: false,
        }
    },
    computed: {
        show: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit('input', value);
            }
        }
    },
    watch: {
        value(val) {
            if (val && this.load) {
                this.loading = true;
                this.load()
                    .finally(() => {
                        this.loading = false;
                    })
            }
        }
    },
    methods: {
        onClickConfirm() {
            if (this.confirm) {
                this.loading = true;
                this.confirm()
                    .finally(() => {
                        this.loading = false;
                    })
                    .then((res) => {
                        this.error = false;
                        this.finished = true;
                        this.msg = res;
                    })
            }
        },
        onSubmit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.onClickConfirm();
                }
            })
        },
        onClose() {
            this.$refs.form.clearValidate();
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .ke__drawer {
    .el-drawer__header {
        padding: 20px;
        margin-bottom: 10px;
        border-bottom: solid 1px #efefef;
    }
    .el-drawer__body {
    }
    &-body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    &-success {
        padding-top: 100px;
        text-align: center;
        &-icon {
            font-size: 48px;
            color: #ffa556;
        }
    }
    &-content {
        width: 100%;
        padding: 0 20px;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
    }
    &-footer {
        border-top: 1px solid #efefef;
        width: 100%;
        padding: 14px 24px;
    }
}
</style>
